<template>
  <div class="operateMain">
    <basic-container v-loading="loading" element-loading-text="数据加载中...">
      <dataList
        placeholder="请输入承租方名称"
        :pageInfo="pager"
        :listData="tableData"
        searchName="clientLesseeName"
        :filterList="filterList"
        :menuList="['add','import','export']"
        @menu-click="handleMenuClick"
      >
        <el-table :data="tableData" ref="multipleTable">
          <el-table-column label="客户名称" width="230" show-overflow-tooltip>
            <template slot-scope="scope">
              <a
                href="javascript:void(0)"
                style="color:#1c71fb "
                @click="$router.push(`/client-manage/lessee-manage/look?id=${scope.row.clientLesseeId}`)"
              >{{scope.row.clientLesseeName}}</a>
            </template>
          </el-table-column>

          <el-table-column label="证件号码" prop="certificateNum"></el-table-column>
          <el-table-column label="客户类型" prop="clientLesseeType" :formatter="lesseeTypeFormater"></el-table-column>
          <el-table-column label="联系电话" prop="phoneNum"></el-table-column>
          <el-table-column label="电子邮箱" prop="email"></el-table-column>
          <el-table-column label="引进单位" prop="introduceUnit"></el-table-column>
          <el-table-column label="通讯地址" width="400" prop="address"></el-table-column>
          <el-table-column width="100px" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleBtnClick('edit',scope.row)">编辑</el-button>
              <el-button type="text" @click="handleBtnClick('delete',scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </dataList>
    </basic-container>
    <clientExport ref="clientExport" :searchForm="params" />
  </div>
</template>

<script>
import { fetchList, delObj } from '@/views/client-manage/api/clientlessee'
import clientExport from '@/views/client-manage/components/client-export.vue'
import dataList from '@/components/dataList'
import { downloadBlob } from '@/utils'
import { mapState } from 'vuex'
export default {
  components: {
    dataList,
    clientExport
  },
  provide () {
    return {
      initList: this.getListData,
    };
  },
  data () {
    return {
      // 表格列表数据
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
        keyword: ''
      },
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20 // 每页显示多少条
      },
      // 筛选
      filterList: [
        { label: '承租方类型', inputType: 'dict', dictName: 'lessee_type', name: 'clientLesseeTypes', multiple: true }
      ],
      // 页面loading
      loading: false,
    }
  },
  computed: {
    ...mapState({
      //客户类型
      lessee_type: state => {
        let data = state.dict.find(item => item.type === "lessee_type") || {};
        return data.children || []
      },
    })
  },
  beforeMount () {
    this.getListData();
  },
  methods: {
    // 客户类型格式化
    lesseeTypeFormater (row, column, cellValue) {
      let obj = this.lessee_type.find(p => p.value == cellValue)
      return obj ? obj.label : ''
    },
    // 数据请求
    getListData (params = {}) {
      this.loading = true
      let requestData = { ...this.params, ...params }
      fetchList(requestData).then(res => {
        const { current, size, total, records } = res.data.data
        this.tableData = records
        this.params = requestData
        this.pager = { total, current, size }
      }).finally(() => {
        this.loading = false
      })
    },
    // 菜单点击监听
    handleMenuClick (type) {

      switch (type) {
        case 'add':
          this.$router.push("/client-manage/lessee-manage/add");
          break;
        case 'export':
          this.$refs.clientExport.show()
          break;
        case 'import':
          this.$router.push("/client-manage/lessee-manage/import");
          break;
        default:
          this.$message(type)
          break;
      }
    },
    //表格按钮点击事件监听
    handleBtnClick (type, row = {}) {
      switch (type) {
        case 'edit':
          this.$router.push(`/client-manage/lessee-manage/edit?id=${row.clientLesseeId}`)
          break;
        case 'delete':
          this.deleteData(row.clientLesseeId);
          break;
        default:
          break;
      }
    },
    // 删除数据
    async deleteData (data) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        try {
          let del = await delObj(data);
          if (del.data.code == 0) {
            this.$message.success("删除成功!")
            this.getListData({ current: 1 })
          }

        } catch (error) {
          this.$message.fail("删除失败!")
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.operateMain {
  /deep/ .top-buttons {
    float: right;
    width: 50%;
  }
  /deep/ .v-search {
    width: 50%;
    justify-content: flex-start;
  }
  /deep/ .operaColumn .el-button {
    color: var(--color);
  }
}
</style>
